<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Class 绑定对象</title>
    </head>

    <body>
        <div id="app">
            <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
                Class 绑定对象
            </div>
        </div>

        <script type="module">
            import Vue from '../vue.esm.browser.js'
        
            const app = new Vue({
                el: '#app',
                data: {
                    isActive: true,
                    hasError: false
                }
            })
        </script>

        <style>
            .static {
                box-sizing: border-box;
                
                width: 400px;
                height: 300px;

                padding: 20px;

                border: 1px solid black;
            }

            .active {
                background-color: royalblue;
            }

            .text-danger {
                color: red;
            }
        </style>
    </body>
</html>